<template>
  <div class="confirm-cost-item">
    <div class="confirm-cost-title">
      <div class="confirm-cost-title-left">
        <span class="tag-name">{{ record.feeCategoryName }}- {{ record.feeName }}</span>
        <span class="tag-online" v-if="record.feeTypeName">{{ record.feeTypeName }}</span>
        <span class="tag-cost" v-if="record.costTypeName">{{ record.costTypeName }}</span>
      </div>
      <div class="confirm-cost-title-right"
        >{{ record.costTypeName === '收款' ? '应收' : '应付' }}：{{ unitVal(record.totalAmount, '元') }}</div
      >
    </div>
    <div class="confirm-cost-card">
      <div class="confirm-cost-card-item">
        <div class="confirm-cost-card-item-label">购置单号：</div>
        <div class="confirm-cost-card-item-value">{{ record.businesCode || '-' }}</div>
      </div>
      <div class="confirm-cost-card-item">
        <div class="confirm-cost-card-item-label">汽车销售供应商：</div>
        <div class="confirm-cost-card-item-value">{{ record.supplierName || '-' }}</div>
      </div>
      <div class="confirm-cost-card-item">
        <div class="confirm-cost-card-item-label">车牌号：</div>
        <div class="confirm-cost-card-item-value">{{ record.carLicenseNo || '-' }}</div>
      </div>
      <div class="confirm-cost-card-item mg-top" v-if="record.feeCategory === 0">
        <div class="confirm-cost-card-item-label">购置费金额：</div>
        <div class="confirm-cost-card-item-value">{{ unitVal(record.totalAmount, '元') }}</div>
      </div>
      <div class="confirm-cost-card-item mg-top" v-if="record.feeCategory === 0">
        <div class="confirm-cost-card-item-label">期数：</div>
        <div class="confirm-cost-card-item-value">{{ record.installmentNum || '-' }}</div>
      </div>
      <div class="taggle-card" @click="taggleCard = !taggleCard">
        <div
          >{{ taggleCard ? '收起' : '展开' }}
          <span>
            <icon-down v-if="!taggleCard" />
            <icon-up v-else />
          </span>
        </div>
      </div>
    </div>
    <div style="padding: 0 20px">
      <a-divider />
    </div>
    <div class="confirm-cost-table" v-if="taggleCard && record.feeDetailList.length">
      <div class="confirm-cost-table-item" v-for="(item, inx) in record.feeDetailList" :key="inx">
        <div class="confirm-cost-table-item-top">
          <div class="confirm-cost-table-item-top-left">
            <div>{{ item.itemName }}</div>
            <div>{{ item.costTypeStr }}</div>
          </div>
          <div class="confirm-cost-table-item-top-right">{{ unitVal(item.amount, '元') }}</div>
        </div>
        <div class="split-line"></div>
        <div class="confirm-cost-table-item-bottom">{{ item.costType == 0 ? '待收' : '待付' }}：{{ unitVal(item.amount, '元') }}</div>
      </div>
      <div style="padding: 0 20px; background: #f2f3f5">
        <div class="split-line-no-margin"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { unitVal } from '@/utils'

  const feeShow = ref(true)
  const showFee = () => {
    feeShow.value = !feeShow.value
  }

  const taggleCard = ref(true)

  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })
</script>

<style lang="less" scoped>
  .mg-top {
    margin-top: 16px;
  }
  .split-line {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1px;
    background: #e2e4e5;
  }
  .split-line-no-margin {
    height: 1px;
    background: #e2e4e5;
  }
  .confirm-cost-item {
    .confirm-cost-title {
      height: 41px;
      background: #f2f3f5;
      opacity: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .confirm-cost-title-left {
        .tag-name {
          font-size: 14px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1d2129;
        }
        .tag-online {
          background: #e8f7ff;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #3491fa;
          margin-left: 12px;
          color: #3491fa;
          font-size: 12px;
          padding: 0 8px;
        }
        .tag-cost {
          background: #fff7e8;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #ff7d00;
          margin-left: 12px;
          font-size: 12px;
          color: #ff7d00;
          padding: 0 8px;
        }
      }
      .confirm-cost-title-right {
        font-size: 14px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1890ff;
      }
    }
    .confirm-cost-card {
      margin-top: 20px;
      padding: 0 20px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      position: relative;
      .confirm-cost-card-item {
        width: 33.3%;
        display: flex;
        font-size: 14px;
        font-weight: 400;

        font-family: PingFang SC-Regular, PingFang SC;
        .confirm-cost-card-item-label {
          color: #4e5969;
        }
        .confirm-cost-card-item-value {
          color: #1d2129;
        }
      }
      .taggle-card {
        position: absolute;
        right: 0;
        top: 0;

        color: #1890ff;
      }
    }
    .confirm-cost-table {
      padding: 0 20px;
      .confirm-cost-table-item {
        padding: 20px;
        background: #f2f3f5;

        .confirm-cost-table-item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #1d2129;
          .confirm-cost-table-item-top-left {
            width: 30%;
            display: flex;
            justify-content: space-between;
          }
        }
        .confirm-cost-table-item-bottom {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
